<!--
  用法和el-card一样
  唯一的区别是增加了footer
-->

<template functional>
  <div class="el-card">
    <div v-if="$slots.header || header" class="el-card__header">
      <slot name="header">{{ header }}</slot>
    </div>
    <div class="el-card__body" :style="bodyStyle">
      <slot />
    </div>
    <div v-if="$slots.footer || footer" class="ex-card-footer">
      <slot name="footer">{{ footer }}</slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ExtendCard',
  props: {
    header: {},
    bodyStyle: {},
    footer: {}
  }
}
</script>
<style lang="scss" scode>
.ex-card-footer {
  padding: 18px 20px;
  border-top: 1px solid #e6ebf5;
}
</style>
